<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}</div>

      <leftmenu :menu_number="6"></leftmenu>
    </a-layout-sider>

    <a-layout>
      <headmenu></headmenu>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >
        <ul>
          <li v-for="(item,index) in ranking_list" :key="index">{{item[0]}}请了{{item[1]}}次假</li>
        </ul>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


<script>
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from "./headmenu.vue";
import { get_ranking } from "./axios_http/api";

export default {
  data() {
    return {
      username: localStorage.getItem("username"),
      collapsed: false,
      ranking_list: [],
    };
  },
  methods: {},
  components: {
    leftmenu: leftmenu,
    headmenu: headmenu,
  },
  created() {
    get_ranking().then((resp) => {
      console.log(resp);
      this.ranking_list = resp.data
    });
  },
};
</script>

<style>
ul {
  list-style: none;
}
li {
  position: relative;
  padding-left: 30px;
  height: 36px;
  line-height: 36px;
}
li:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #999999;
  text-align: center;
  position: absolute;
  left: 0;
  top: 8px;
}
li:first-child:after {
  content: "1";
  background: #fd8c84;
}
li:nth-child(2):after {
  content: "2";
  background: #ffcc99;
}
li:nth-child(3):after {
  content: "3";
  background: #7fd75a;
}
li:nth-child(4):after {
  content: "4";
  background: #ccccff;
}
li:nth-child(5):after {
  content: "5";
  background: #60c4fd;
}
li:nth-child(6):after {
  content: "6";
}
li:nth-child(7):after {
  content: "7";
}
li:nth-child(8):after {
  content: "8";
}
li:nth-child(9):after {
  content: "9";
}
li:nth-child(10):after {
  content: "10";
}
</style>
